<div class="ddp-wrap-info" [class.ddp-selected]="isShowInformation" (clickOutside)="closeInformation()">
  <em class="ddp-icon-info" (click)="onChangeShowInformation()"></em>
  <div class="ddp-box-layout4 type-info" *ngIf="isShowInformation">
    <a href="javascript:" class="ddp-icon-close" (click)="closeInformation(); $event.stopImmediatePropagation()"></a>
    <div class="ddp-data-title">
      Information
    </div>
    <div class="ddp-data-det">
      <table class="ddp-table-pop">
        <colgroup>
          <col width="130px">
          <col width="">
        </colgroup>
        <tbody>
        <tr>
          <th>{{'msg.metadata.md.ui.data.type'| translate}}</th>
          <td>{{getMetadataType()}}</td>
        </tr>
        <ng-container *ngIf="isDatasourceType()">
          <ng-container *ngIf="isNotEmptyIngestion()">
            <tr>
              <th>{{'msg.storage.ui.intervals' | translate}}</th>
              <td>{{getDataRangeLabel()}}</td>
            </tr>
            <tr>
              <th>{{'msg.storage.th.segment.gran'| translate}}</th>
              <td>{{dataSource.segGranularity}}</td>
            </tr>
            <tr>
              <th>{{'msg.storage.th.query.gran'| translate}}</th>
              <td>{{dataSource.granularity}}</td>
            </tr>
          </ng-container>
        </ng-container>
        <ng-container *ngIf="isDatabaseType()">
          <tr>
            <th>{{'msg.comm.th.host'| translate}}</th>
            <td>{{dataConnection.hostname}}</td>
          </tr>
          <tr>
            <th>{{'msg.comm.th.port'| translate}}</th>
            <td>{{dataConnection.port}}</td>
          </tr>
          <tr>
            <th>{{'msg.storage.ui.security'| translate}}</th>
            <td>{{getConvertedAuthenticationTypeLabel()}}</td>
          </tr>
          <tr>
            <th>{{'msg.storage.ui.list.schema'| translate}}</th>
            <td>{{source.schema}}</td>
          </tr>
          <tr>
            <th>{{'msg.storage.btn.table'| translate}}</th>
            <td>{{source.table}}</td>
          </tr>
        </ng-container>
        <ng-container *ngIf="isStagingDbType()">
          <tr>
            <th>{{'msg.storage.ui.list.schema'| translate}}</th>
            <td>{{source.schema}}</td>
          </tr>
          <tr>
            <th>{{'msg.storage.btn.table'| translate}}</th>
            <td>{{source.table}}</td>
          </tr>
        </ng-container>
        </tbody>
      </table>
    </div>

  </div>
</div>
